<template>
  <div class="outer-wrap flex">
    <div class="left-column">
      <div class="img-wrap" ref="imgWrap">
        <img :style="{width: imgW + 'px', height: imgH + 'px'}" src="../../../images/tadiao.png" alt="">
      </div>
      <div class="position">
        <div class="text-item">
          <i class="round"></i>
          <span>前臂长：</span>
          <span>{{ deviceInfo.forearmLength }}m</span>
        </div>
        <div class="text-item">
          <i class="round"></i>
          <span>后臂长：</span>
          <span>{{ deviceInfo.behindLength }}m</span>
        </div>
        <div class="text-item">
          <i class="round"></i>
          <span>塔壁高：</span>
          <span>{{ deviceInfo.topLength }}m</span>
        </div>
      </div>
    </div>

    <div class="middle-column column-warp">
      <h4>司机信息</h4>
      <div class="txt-wrap" v-for="item in driverList" :key="item.id">
        <div class="text-item">
          <span>姓名：</span>
          <span>{{ item.name }}</span>
        </div>
        <div class="text-item">
          <span>年龄：</span>
          <span>{{ item.age }}</span>
        </div>
        <div class="text-item">
          <span>证件：</span>
          <span>{{ item.idNumber }}</span>
        </div>
      </div>
    </div>

    <div class="right-column column-warp">
      <h4>设备信息</h4>
      <div class="text-item">
        <span>设备型号：</span>
        <span class="text">{{ deviceInfo.equipmentModel }}</span>
      </div>
      <div class="text-item">
        <span>建委编号：</span>
        <span class="text">{{ deviceInfo.committeeNumber }}</span>
      </div>
      <div class="text-item">
        <span>生产厂家：</span>
        <span class="text">{{ deviceInfo.manufactor }}</span>
      </div>
      <div class="text-item">
        <span>产权单位：</span>
        <span class="text">{{ deviceInfo.propertyUnit }}</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "MiddleShowInfo",
    components: {},
    data() {
      return {
        imgW: 200,
        imgH: 200,
        driverList: [],
        deviceInfo: {
          forearmLength: "",
          behindLength: "",
          topLength: "",
          equipmentModel: "",
          committeeNumber: "",
          manufactor: "",
          propertyUnit: ""
        }
      }
    },
    props: {
      dataInfo: Object
    },
    computed: {},
    watch: {
      dataInfo (val) {
        this.deviceInfo = val.towerCrane;
        this.driverList = [val.craneDriver];
      }
    },
    created() {

    },
    mounted() {
      this.getIamgeHeight();
    },
    methods: {
      getIamgeHeight() {
        this.$nextTick(() => {
          let imgH = Math.floor(this.$refs.imgWrap.offsetHeight);
          let arr = imgH.toString().split("");
          let len = arr.length;
          let num = imgH - arr[len - 1];
          this.imgW = num;
          this.imgH = num;
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .outer-wrap{
    width: 100%;
    height: 100%;

    .left-column{
      width: 51%;
      height: 100%;
      background: #1f2432;
      margin-right: 12px;
      position: relative;

      .img-wrap{
        width: 80%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .position{
        width: 140px;
        position: absolute;
        right: 20px;
        bottom: 20px;
        z-index: 30;

        .text-item{
          font-size: 13px;
          color: #74e0d3;
          margin: 8px;
          display: flex;
          align-items: center;

          .round{
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #74e0d3;
            display: inline-block;
            margin-right: 14px;
          }
        }
      }
    }

    .middle-column{
      width: 25%;
      height: 100%;
      background: #1f2432;
      margin-right: 12px;
    }

    .right-column{
      width: 25%;
      height: 100%;
      background: #1f2432;
    }

    .column-warp{
      color: rgba(255, 255, 255, 0.85);
      padding: 24px 30px;
      box-sizing: border-box;

      h4{
        margin-bottom: 20px;
      }

      .txt-wrap{
        margin: 20px 0;

        .text-item{
          margin: 5px 0;
        }
      }

      .text-item{
        font-size: 14px;
        margin: 12px 0;
        display: flex;

        .text{
          display: inline-block;
          flex: 1;
        }
      }
    }
  }
</style>
